<template>
  <div id="homeBox">
    <div class="TopBox" style="position: fixed; top: 0; z-index: 1">
      <!-- 搜索框 -->
      <van-nav-bar fixed placeholder>
        <template #title>
          <router-link class="home-header-search" to="/SearchView">
            <van-icon name="search" color="#fff" />搜索
          </router-link>
        </template>
      </van-nav-bar>
      <!-- 导航栏 -->
      <van-tabs v-model="active" @click="switchTab">
        <van-tab
          v-for="item in cate"
          :key="item._id"
          :title="item.name"
        ></van-tab>
      </van-tabs>
    </div>
    <!-- 内容框 -->
    <div class="articleList">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="------已经被掏空了o(╥﹏╥)o------"
          @load="getArticle"
          :immediate-check="false"
        >
          <div
            style="
              border-bottom: 0.5px solid #f8f8f8;
              max-height: 600px;
              margin-bottom: 10px;
              overflow: hidden;
            "
            v-for="item in articleList"
            :key="item._id"
            @click="$router.push({path:'/article',query:{id:item._id,title:item.title,imageSrc:item.imageSrc}})"
          >
            <h3>{{ item.title }}</h3>
            <div
              class="imgBox"
              :class="{
                none: item.poster_type == 1,
                articlesingleImg: item.poster_type == 2,
                articlesmoreImg: item.poster_type == 3, 
              }"
            >
              <img :src="img" v-for="img in item.imageSrc" :key="img" />
            </div>
            <div class="releasePeople">
              <p>{{ item.author }}</p>
              <p>{{ item.comment }}评论</p>
              <p>{{ item.time | dateFormat }}</p>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { Tab, Tabs, List, PullRefresh,ImagePreview  } from "vant";
import { getCateList, getArticleList } from "@/api/home.js";
//

export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [ImagePreview.name]: ImagePreview,
  },
  data() {
    return {
      value: "",
      active: 0,
      cate: [], //导航栏列表
      articleList: [], //文章列表
      loading: false, //是否加载
      finished: false, //是否全部加载完毕
      skip: 0, //从skip开始拿
      limit: 20, //一次那多少
      refreshing: false, //是否在刷新
    };
  },
  computed: {
    cate_id() {
      let active_cate = this.cate[this.active];
      // console.log(active_cate)
      if (!active_cate) return "";
      return active_cate._id;
    },
  },
  created() {
    this.getCate();
  },
  methods: {
    // 切换分类
    switchTab() {
      // console.log(this.active);
      this.articleList = []; //清空原来数据
      this.skip = 0;
      this.finished = false; //初始化上拉加载状态
      this.getArticle();
    },
    getCate() {
      getCateList().then((res) => {
        this.cate = res.data;
        this.getArticle();
      });
    },
    getArticle(flag) {
      let { cate_id, skip, limit } = this;
      getArticleList({ cate_id, skip, limit })
        .then((res) => {
          // 是否刷新
          if (flag) {
            setTimeout((v) => {
              this.refreshing = false; //下拉刷新状态
              this.articleList = res.data; // 如果是刷新
            }, 800);
          } else {
            this.articleList.push(...res.data); //如果不是刷新
          }
          let len = this.articleList.length;
          let count = res.count;
          // 每次加载判断是否全部加载完毕 如果加载完毕finished 改为 true
          // 若果没有加载完毕 将loading 更改为 false
          if (len >= count) {
            this.finished = true;
          } else {
            this.loading = false;
            this.skip = len; //skip要动态变化
          }
          // console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 文章刷新
    onRefresh() {
      this.skip = 0;
      this.finished = false;
      this.getArticle(true);
    },
  },
};
</script>

<style lang="less" scoped>
.home-header-search {
  width: 280px;
  height: 34px;
  border-radius: 20px;
  background-color: #ad80d5;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
::v-deep .van-tabs--line .van-tabs__wrap {
  height: 50px;
}
::v-deep .van-nav-bar__title {
  max-width: 75%;
}

::v-deep .van-tab {
  border-right: 1px solid #f0f1f5;
  border-bottom: 1px solid #f0f1f5;
}

::v-deep .van-tabs__nav--complete .van-tab:nth-child(7) {
  border-right: 1px solid #fff;
}

::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
  padding-left: 0;
  padding-right: 0;
}
.articleList {
  overflow: hidden;
  padding-top: 100px;
  padding-bottom: 50px;
  img {
    max-width: 100%;
  }

  h3 {
    margin:  20px;
  }

  .articlesmoreImg img {
    width: 110px;
    height: 100px;
  }
}
.imgBox {
  margin-left: 20px;
  margin-right: 20px;
}
.releasePeople {
  color: #afafaf;
  font-size: 12px;
  display: flex;
}
.releasePeople p {
  height: 20px;
  line-height: 20px;
  margin-left: 20px;
}
</style>

